<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button
        :disabled="!selectedRowKeys.length"
        type="primary"
        icon="download"
        @click="handleExportExcel"
      >导出</a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      :rowKey="(record, index)=> index"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
      :scroll="{ x: true}"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
    >
<!--      <span-->
<!--        slot="action"-->
<!--        slot-scope="text, record"-->
<!--      >-->
<!--        <template>-->
<!--          <a @click="handleOpenUpdateStatusModel(record)">支付</a>-->
<!--        </template>-->
<!--      </span>-->
    </s-table>

    <update-status-modal
      ref="updateStatusModal"
      @updateStatus="handleUpdateStatus"
    />
  </a-card>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import UpdateStatusModal from './components/UpdateStatusModal'
import CreateForm from '@/modules/CreateForm'
import { getSettlementList, updateBatchOrOrderStatus } from '@/api/manage'
import { SETTLEMENT_LIST_COLUMNS } from './constants/settlement'
import { exportJsonToExcel, getHeaderAndDataFromTable } from '@/utils/exportExcel'

export default {
  name: 'TableListPage',
  components: {
    STable,
    Ellipsis,
    CreateForm,
    UpdateStatusModal
  },
  data () {
    return {
      queryParam: {},
      columns: SETTLEMENT_LIST_COLUMNS,
      loadData: parameter => {
        return getSettlementList(Object.assign(parameter, this.queryParam))
          .then(res => {
            return res.resData
          })
      },
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleOpenUpdateStatusModel (record) {
      this.$refs.updateStatusModal.show({ settleOrderId: record.settleOrderId })
    },
    handleUpdateStatus (updateStatusParams, callback) {
      updateBatchOrOrderStatus(updateStatusParams)
        .then(res => {
          callback()
        }).catch(err => {
        callback(err)
      })
    },
    handleExportExcel () {
      const { header, data } = getHeaderAndDataFromTable(
        SETTLEMENT_LIST_COLUMNS,
        this.selectedRows
      )

      exportJsonToExcel({
        header,
        data,
        filename: `异常结算订单列表_${+new Date()}`
      })
    }
  }
}
</script>
